<template>
  <Temp title="导航">
    <div class="navigation">
      <div class="navigation-item" @click="goBack">
        <Icon
          title="后退"
          name="west"
          :color="
            canGoBack ? 'rgba(0, 210, 255, 1)' : '#A7ADB5'
          "
          font-size="20"
        />
      </div>
      <div class="navigation-item" @click="goForward">
        <Icon
          title="前进"
          name="east"
          :color="
            canGoForward
              ? 'rgba(0, 210, 255, 1)'
              : '#A7ADB5'
          "
          font-size="20"
        />
      </div>
    </div>
  </Temp>
</template>

<script>
import Temp from '@/components/utool/components/temp'
import Icon from '@/components/icon'
import { getAction } from '@/utils/helper'
import CameraRecordUtil from '@/utils/record/cameraRecord'

const mapViewer = {}

export default {
  name: 'Navigation',
  inject: ['viewerId'],
  components: {
    Temp,
    Icon
  },
  data() {
    return {
      recordUtil: null
    }
  },
  async created() {
    const { viewer, toolManager } = await getAction(
      this.viewerId
    )
    mapViewer[this.viewerId] = toolManager.viewer
    this.recordUtil = CameraRecordUtil.getOrCreateUtil(
      this.viewerId,
      viewer
    )
  },
  methods: {
    goBack() {
      this.recordUtil.previous()
    },
    goForward() {
      this.recordUtil.next()
    }
  },
  computed: {
    canGoBack() {
      return (
        this.recordUtil &&
        this.recordUtil.count > 0 &&
        this.recordUtil.index > 0
      )
    },
    canGoForward() {
      return (
        this.recordUtil &&
        this.recordUtil.count > 0 &&
        this.recordUtil.index >= 0 &&
        this.recordUtil.index < this.recordUtil.count - 1
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.navigation {
  width: 200px;
  padding: 10px;
  background-color: #193b51;
  border-radius: 0 0 8px 8px;
  display: flex;
  align-items: center;
}
</style>
